<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #box {
            width: 360px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }

        #box img {
            vertical-align: middle;
        }

        #box ul {
            overflow: hidden;
            border-top: 1px solid #ccc;
        }

        #box li {
            float: left;
        }
    </style>
</head>
<body>
<div id="box">
    <img src="images/01big.jpg" id="bigImg" alt=""/>
    <ul id="itemList">
        <li><img src="images/01.jpg" onclick="changePic(1);" alt=""/></li>
        <li><img src="images/02.jpg" onclick="changePic(2);" alt=""/></li>
        <li><img src="images/03.jpg" onclick="changePic(3);" alt=""/></li>
        <li><img src="images/04.jpg" onclick="changePic(4);" alt=""/></li>
        <li><img src="images/05.jpg" onclick="changePic(5);" alt=""/></li>
    </ul>
</div>
<script>
    //点击下面的小图片 让上面的大图片显示相应的大图
    //1.给img设置onclick属性 点击第二个图片 让上面的img的src变为对应的大图
    function changePic(imgName) {
        //alert("a");
        //找人
        var bigImg = document.getElementById("bigImg");
        //控制src属性
        bigImg.src = "images/0" + imgName + "big.jpg";
    }
</script>
</body>
</html>
